<template>
<!--  在vue3中不用在加外层的容器标签了-->
  <h3>我的名字:{{name}}</h3>
  <h3>我的年龄:{{age}}</h3>
  <button @click="sayHello">自我介绍</button>
</template>

<script>
import {h} from "vue";
export default {
  name: 'App',
  // vue3中的方法 数据 。。。都都在这个函数中定义 vue2和vue3可以混用但不建议 不好 暂时不考虑响应式的问题
  setup() {
    // 定义数据
    let name = '张三';
    let age = 18;
    //定义函数
    function sayHello() {
      alert(`大家好 我是${name} 年龄${age}`);
    }

    //最后要返回这些东西 要不然模板用不了
    // return {
    //   name,
    //   age,
    //   sayHello
    // }
    //第二种方法渲染模板(不常用) 第一个参数 标签名字 第二个参数标签内容
    // return () => h("h1",'你好')
  }
}
</script>

<style>

</style>
